<template>
  <div class="my">
    <div v-if="user_login">
      <!-- 用户界面 -->
      <AdminUser :loginname="loginname" :msg="msg"
       :filled_community="filled_community"
      />
    </div>
    <div v-else>
      <!-- 登陆表单 -->
      <van-form @submit="onSubmit">
        <p class="tip">未注册的账号将会自动创建</p>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import AdminUser from '@/components/AdminUser/AdminUser.vue'
import {dologin} from '@/api/index';
export default {
  name: 'My',
  components: {
    AdminUser
  },
  props: {
    
  },
  data(){
      return{
          username: '',
          password: '',
          user_login: false, //用户名是否存在数据库
          loginname: '',
          msg: "", //传到用户界面的登录状态信息
          filled_community:false, //是否填写社区信息
          // areaMsg: {}, //填写的社区信息
          from: {},
      } 
  },
  computed: {
    areaMsg () {
      return this.$store.state.areaMsg
    }
  },
  created(){
    
  },
  mounted(){

	},
  beforeRouteEnter(to, from, next) {
    if(from.name == "ChargeStation"){
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.$set( vm.from, "name", from.name )
        vm.$set( vm.from, "query", from.query )
      })
    }
      next()
  },
  watch:{
      user_login(){
        if( Object.keys(this.from).length ){
          this.$router.push({
            path: this.from.name,
            query: this.from.query
          })
        }
      }
  },
  methods:{
    async onSubmit(values) {
      let res = await dologin(values);
      //已有用户名存在
      if(!res.data.dl) this.$notify({ type: 'warning', message: "用户名已存在" })
      else{
        //老用户判断是否填写社区信息展示不同界面
        if(res.data.areaMsg.community){
          this.filled_community = true;
          this.$store.commit('changeAreaMsg', {areaMsg: res.data.areaMsg})
        }
        this.msg = res.data.msg;
        this.user_login = res.data.dl;
        this.loginname = values.username;
        //告诉vuex已经登录
        this.$store.commit('changeislogin', true)
        //告诉vuex登录的是谁
        this.$store.commit('changeadminuser', values.username)
      }
    },
      
  },
    
}
</script>

<style lang="less" scoped>
  .my{
    .van-form{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 95vw;
      .van-button--info {
        color: #fff;
        background-color: #00ce6f;
        border: 1px solid #00ce6f;
    }
    }
    .tip{
      color: #999;
      margin-bottom: 30px;
    }
  }



</style>